<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title>
        构建列表--(项目名：<span style="color:#00c853;">{{$route.params.prjName}}</span>)
      </q-card-title>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-main>
        <q-table grid :data="tableData" :columns="columns" :pagination.sync="serverPagination" row-key="name"
                 :rows-per-page-options="rowsPerPageOptions" ref="table" @request="request" :loading="loading"
                 :visible-columns="visibleColumns">
          <template slot="top-left" slot-scope="props">
            <q-btn color="secondary" icon="search" class="float-right q-mr-sm" @click.native="$store.dispatch('listBuild/loadTable', $route.params.projectId)"></q-btn>
            <q-btn color="negative" class="float-right q-mr-sm" @click.native="$store.dispatch('listBuild/newBuild', $route.params.projectId)">全自动构建</q-btn>
            <q-btn color="primary" class="float-right q-mr-sm" @click.native="$router.push('/listpubproject')">返回</q-btn>
            <q-table-columns color="secondary" class="q-mr-sm" v-model="visibleColumns" :columns="columns"/>
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"/>
          </template>
          <template slot="top-right" slot-scope="props">
            <q-search @input="request(props)" :debounce="600" clearable v-model="search" placeholder="bagName" style="width:330px;"/>
          </template>
          <div slot="item" slot-scope="props" class="q-pa-xs col-xs-12 col-md-4 col-sm-6 col-lg-3 transition-generic">
            <q-card class="text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)" dark>
              <q-card-title>
                构建号：{{ props.row.build_number }}
                <q-icon v-if="props.row.status_code===1" slot="right" name="done" />
                <q-spinner-facebook v-if="props.row.status_code===0" slot="right" :size="30" />
              </q-card-title>
              <q-card-main style="word-break:break-all;">
                {{ props.row.bagName }}
                <q-card-separator />
                <q-item v-for="(col, index) in props.cols" :key="col.id" style="min-height: 30px;">
                  <q-item-main><div class="toufu">{{ col.label }}</div></q-item-main>
                  <q-item-side right :color="index===2?'yellow':'white'"><div class="toufu">{{ col.value }}</div></q-item-side>
                </q-item>
              </q-card-main>
              <q-card-separator />
              <q-card-actions>
                <q-btn flat color="info" @click.native="$store.dispatch('listBuild/buildInfo', props.row.id)">构建信息</q-btn>
                <q-btn flat color="warning" @click.native="$store.commit('listBuild/stopBuild', props.row.id)">强制停止</q-btn>
              </q-card-actions>
            </q-card>
          </div>
        </q-table>
      </q-card-main>
    </q-card>
    <q-modal v-model="jenkinsDialog" :content-css="{minWidth: '80vw', minHeight: '80vh'}" @hide="closeJenkins">
      <q-modal-layout id="scroll-target">
        <q-toolbar slot="header">
          <q-btn flat round dense @click="jenkinsDialog = false" icon="reply"/>
          <q-toolbar-title>Jenkins信息</q-toolbar-title>
        </q-toolbar>
        <q-toolbar slot="footer">
          <q-btn flat @click.native="stopScroll">停止滚动</q-btn>
        </q-toolbar>
        <div class="q-ma-lg">
          <q-input type="textarea" v-model="info" float-label="info" :readonly="true"/>
        </div>
      </q-modal-layout>
    </q-modal>
    <verify :vcodeDialog = "verifyDialog" @upVerify="$store.dispatch('listBuild/forceStop')"
            :verifyTitle="verifyTitle" @clsVerify="verifyDialog = false" ></verify>
  </q-page>
</template>

<script>
import listBuildModule from '../../store/listBuild'
export default {
  preFetch ({ store, currentRoute }) {
    store.registerModule('listBuild', listBuildModule)
    Promise.all([
      store.dispatch('listBuild/loadHeaders'),
      store.dispatch('listBuild/loadTable', currentRoute.params.projectId)])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'ListBuild',
  data: function () {
    return this.$store.state.listBuild
  },
  methods: {
    request (props) {
      this.serverPagination = props.pagination
      this.$store.dispatch('listBuild/loadTable', this.$route.params.projectId)
    },
    closeJenkins () {
      this.info = ''
      clearInterval(this.interval)
      this.$store.dispatch('listBuild/loadTable', this.$route.params.projectId)
    },
    stopScroll () {
      clearInterval(this.interval)
    }
  },
  beforeDestroy () {
    this.$store.unregisterModule('listBuild')
  },
  components: {
    verify: () => import('components/verify/verify')
  }
}
</script>

<style>
</style>
